<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="comunLogin.xhtml">
        <ui:define name="cabecera">
            <p:layout>
                <p:layoutUnit position="center">
                    
                        <p:graphicImage value="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/logo.png" width="300" height="110"/>

                    <form method="post" action="j_security_check" name="j_security_check" >  
                        <table cellspacing="0" style="position: absolute; bottom: 0%; right: 0%; font-size: 11px">
                            <tr>
                                <td style="text-align: center"><h:outputLabel value="Usuario" style="color: #FF6600; size: 15px; font-size: 13px"/></td>
                                <td style="text-align: center"><h:outputLabel value="Contraseña" style="color: #FF6600; size: 15px; font-size: 13px"/></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="j_username" /></td>
                                <td><input type="password" name="j_password" /> </td>
                                <td> <input type="submit" value="Ingresar" style="background: #FF6600 url(http://#{initParam['DIRECCION_SERVIDOR']}/estilos/estilo-comunLogin/images/ui-bg_inset-hard_75_FF6600_1x100.png) 50% 50% repeat-x; 
                                            border-radius: 3px; border: 1px solid #FF6600; color: #000000; font-weight: bold " /></td>
                            </tr>
                        </table>                       
                    </form>
                </p:layoutUnit>
                
            </p:layout>
            
        </ui:define>
        <ui:define name="body">
            <f:view contentType="text/html" >
                <p:layout  id="layout" style="min-width:300px;min-height:500px; max-height: 500px" >  
                    <p:layoutUnit position="center" resizable="false"  >  
                        <div style="float: top; text-align: center; font-family: segoe script; font-size: 18px; color: #CCCCCC;">Bienvenido a Social Full Fun, un sitio en el cual podrás obtener información de nuestra red  
                                                                                                                                de locales con los mejores sitios de diversión y esparcimiento; al igual que puedes obtener membrecías, 
                                                                                                                                puntos para canje de consumos, eventos, promociones.  Podrás disfrutar de todo esto en un ambiente 
                                                                                                                                amable y amistoso solo en SOCIAL FULL FUN..!!</div>
                        <center><br/><p:galleria value="#{imagenes.images}" var="image" panelWidth="300" panelHeight="300" 
                                                 style="float: bottom; position: relative; " >  
                                <center> <h:graphicImage value="http://#{initParam['DIRECCION_SERVIDOR']}/Imagenes/#{image}" 
                                                         height="10" width="10"  /></center>
                            </p:galleria></center>  
                    </p:layoutUnit>  

                    <p:layoutUnit  position="east" size="425"  >  
                        <p:ajaxStatus style="width:75px;height:75px;position:fixed;right:100px;bottom:100px">  
                            <f:facet name="start">  
                                <p:graphicImage value="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/loading.gif" />  
                            </f:facet>  

                            <f:facet name="complete">  
                                <h:outputText value="" />  
                            </f:facet>  
                        </p:ajaxStatus> 
                        <h:form id="formularioRegistroID">
                            <p:growl id="growl" showDetail="true" sticky="true" />
                            <center><p:panelGrid columns="2" style="size: 350px">  
                                <f:facet name="header">  
                                    REGISTRO 
                                </f:facet>  

                                <h:outputLabel value="Nombres:*" />
                                 <h:inputText id="ingNombreID" size="20" value="#{registroNuevoUsuarioDataManager.usuario.usNombre}" required="true" 
                                                 requiredMessage="El nombre es requerido"
                                                 validatorMessage="El Nombre debe poseer máximo 20 caracteres"
                                                 onkeyup="javascript:this.value=this.value.toUpperCase();">
                                        <f:validateLength maximum="20" />
                                 </h:inputText>
  
                                <h:outputLabel value="Primer Apellido:*" />
                                <h:inputText id="ingPrimerApellidoID" value="#{registroNuevoUsuarioDataManager.usuario.usPrimerApellido}" 
                                                 required="true" requiredMessage="El primer apellido es requerido"
                                                 validatorMessage="El Primer Apellido debe poseer máximo 20 caracteres"
                                                 onkeyup="javascript:this.value=this.value.toUpperCase();">
                                        <f:validateLength maximum="20" />
                                </h:inputText>
									
                                <h:outputLabel value="Segundo Apellido:" />
                                <h:inputText size="20" value="#{registroNuevoUsuarioDataManager.usuario.usSegundoApellido}"
                                                 validatorMessage="El Segundo Apellido debe poseer máximo 20 caracteres"
                                                 onkeyup="javascript:this.value=this.value.toUpperCase();">
                                        <f:validateLength maximum="20" />
                                </h:inputText> 
									
                                <h:outputLabel value="País:*" />
                                    <h:selectOneMenu value="#{registroNuevoUsuarioDataManager.pais}" >
                                        <f:converter converterId="paisConvertidor" />
                                        <f:selectItems value="#{registroNuevoUsuarioControlador.selectItemPais}"/>
                                        <p:ajax event="change" update="listaCiudadesID listaZonasID" listener="#{registroNuevoUsuarioControlador.limpiarCiudad}">
                                        </p:ajax>   

                                    </h:selectOneMenu> 
									
                                <h:outputLabel value="Ciudad:*" />
                                    <h:selectOneMenu id="listaCiudadesID" value="#{registroNuevoUsuarioDataManager.ciudad}"  >
                                        <f:converter converterId="ciudadConvertidor" />
                                        <f:selectItems value="#{registroNuevoUsuarioControlador.selectItemCiudad}"/>
                                        <p:ajax event="change" update="listaZonasID"/>
                                    </h:selectOneMenu>

                                    <h:outputLabel value="Zona:*" />
                                    <h:selectOneMenu id="listaZonasID"  value="#{registroNuevoUsuarioDataManager.usuario.zoCodigo}" required="true" 
                                                     requiredMessage="La zona es requerido" >
                                        <f:converter converterId="zonaConvertidor" />
                                        <f:selectItems value="#{registroNuevoUsuarioControlador.selectItemZona}"/>
                                    </h:selectOneMenu>
                                <h:outputLabel value="Correo*" />
                                <h:inputText id="ingCorreoID" size="25" value="#{registroNuevoUsuarioDataManager.usuario.usCorreo}" 
                                                 required="true" 
                                                 requiredMessage="El correo es requerido">
                                        <f:validator binding="#{mailValidador}" />

                                </h:inputText>
									
                                <h:outputLabel value="Contraseña:*" />
                                    <p:password id="ingPassID" value="#{registroNuevoUsuarioDataManager.usuario.usContrasena}" feedback="true" 
                                                size="25" required="true" match="ingPassID2"
                                                requiredMessage="La contraseña: es requerida"
                                                validatorMessage="La contraseña: debe poseer máximo 10 caracteres"
                                                style="background-color: white; background-image: none">
                                        <f:validateLength maximum="10" />
                                    </p:password>
                                
                                <h:outputLabel value="Confirme Contraseña:*" />
                                    <p:password id="ingPassID2" value="#{registroNuevoUsuarioDataManager.usuario.usContrasena}" 
                                                feedback="true" size="25" required="true" 
                                                requiredMessage="La contraseña: es requerida"
                                                validatorMessage="La contraseña: debe poseer máximo 10 caracteres"
                                                style="background-color: white; background-image: none">
                                        <f:validateLength maximum="10" />
                                    </p:password>
  
                                <f:facet name="footer">  
                                    <center><p:commandButton id="botonRegistroID" action="#{registroNuevoUsuarioControlador.registrarUsuario}" value="Registrar" update="formularioRegistroID"/></center>  
                                </f:facet>  
                            </p:panelGrid></center>
                        </h:form> 
                        <br/>
                        <center><div style="float: top; text-align: center; font-family: Segoe Script; font-size: 20px; color: #FF6600;">It`s time to FUN</div></center>
                    </p:layoutUnit>  
                </p:layout> 
            </f:view>
        </ui:define>
    </ui:composition>
</html>


